<template>
    <div class="zt-dialog-solt-3" style="width: 630px;height: calc(100% - 60px);padding-top: 0px;">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px"
            style="height: calc(100% - 105px);padding-right: 20px;">
            <el-row :span="24">
                <el-col :span="12">
                    <el-form-item label="台站:" prop="regionalNodeId">
                        <el-select v-model="form.regionalNodeId" filterable placeholder="台站"
                            class="zt-input-min rihgt-m5" @change="changeUp">
                            <el-option v-for="item in nodeList" :key="item.regionalNodeId"
                                :label="item.regionalNodeName" :value="item.regionalNodeId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备类型:" prop="deviceType">
                        <el-select v-model="form.deviceType" filterable placeholder="请输入设备类型"
                            class="zt-input-min rihgt-m5" @change="changeUp">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备名称:" prop="deviceId">
                        <el-select v-model="form.deviceId" filterable placeholder="请输入设备名称"
                            class="zt-input-min rihgt-m5">
                            <el-option v-for="item in deviceList" :label="item.name" :value="item.id +''" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="在线时长:">
                        <el-input-number class="blue-input" style="width: 100%;" v-model.number="form.onlineHours"
                            :controls="false" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="域名orIP:">
                <el-input class="blue-input" style="width: 100%;" v-model="form.viewAddress" />
            </el-form-item>
            <el-form-item label="故障描述:">
                <el-input class="blue-input" style="width: 100%;" v-model="form.failure" />
            </el-form-item>
            <el-form-item label="维护描述:">
                <el-input class="blue-input" style="width: 100%;" v-model="form.maintenance" />
            </el-form-item>
            <el-form-item label="备注:">
                <el-input v-model="form.remark" type="textarea" placeholder="记录维护的相关信息" />
            </el-form-item>
            <el-row :span="24">
                <el-col :span="12">
                    <el-form-item label="维护日期:">
                        <el-date-picker class="zt-input-min" value-format="yyyy-MM-dd" v-model="form.disposeDay"
                            type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维护金额:">
                        <el-input-number class="zt-input-min" v-model.number="form.cost" :controls="false" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="当前状态:">
                        <el-select v-model="form.status" filterable placeholder="请选择当前状态" class="zt-input-min rihgt-m5">
                            <el-option v-for="item in [{ value: '0', label: '未完成' }, { value: '1', label: '已完成' }]"
                                :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="当前维护人:">
                        <el-select v-model="form.manId" filterable placeholder="维护人" class="zt-input-min rihgt-m5"
                            style="width: 100%;font-weight: 600;margin: 0 20px 0 5px;">
                            <el-option v-for="item in userList" :label="item.nickName" :value="item.userId" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>
        <div class="zt-solt-end">
            <!-- <div class="flex-left bt-white-text" @click="cancel">取消</div> -->
            <el-button class="bt-blue flex-right" @click="submitForm">确定</el-button>
        </div>

    </div>
</template>

<script>
import { getlistNode } from "@/api/business/node";
import { getSelectUser } from "@/api/system/user";
import Api from "@/api/business/fault";
export default {
    name: 'editFault',
    emits: ['close', 'change'],
    components: {},
    props: {
        editObj: {}
    },
    computed: {
    },
    created() {
        // 初始化台站
        getlistNode().then(rs => {
            this.nodeList = rs.rows
        })
        // 查询维护人
        this.initUserList();
        if (this.editObj) {
            this.form = JSON.parse(JSON.stringify(this.editObj))
            // 初始化设备
            this.selectDevice(this.editObj);
        }
    },
    data() {
        return {
            form: {},
            // 台站下拉框数据
            nodeList: [],
            // 设备列表
            deviceList: [],
            // 下拉用户选项
            userList: [],
            // 设备类型选择 1-台站 2-机房 3-电台 4-天线 5-sdr 6-传感器 7-摄像头
            typeList: [
                { id: '1', label: '台站' },
                { id: '2', label: '机房' },
                { id: '3', label: '电台' },
                { id: '4', label: '天线' },
                { id: '5', label: 'sdr' },
                { id: '6', label: '传感器' },
                { id: '7', label: '摄像头' },
            ],
            // 表单校验
            rules: {
                regionalNodeId: [
                    { required: true, message: "台站名称不能为空", trigger: "change" }
                ],
                deviceType: [
                    { required: true, message: "类型不能为空", trigger: "change" }
                ],
                deviceId: [
                    { required: true, message: "设备名称不能为空", trigger: "change" }
                ],
            },
        }
    },
    methods: {
        // 查询用户
        initUserList() {
            getSelectUser().then(rs => {
                this.userList = rs
            })
        },
        // 台站和设备类型变化事件
        changeUp() {
            // this.$set(this.form, 'deviceId', null);
            this.selectDevice();
        },
        // 查询设备
        selectDevice() {
            const { regionalNodeId, deviceType } = this.form;
            if (regionalNodeId && deviceType) {
                Api.selectDevice(this.form).then(rs => {
                    this.deviceList = rs.rows;
                    // this.$set(this.form, 'deviceId', this.form.deviceId);
                })
            }
        },
        // 取消事件
        cancel() {
            this.form = {};
            this.$emit('close')
        },
        // 保存
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (!valid) return;
                if (this.form.maintenanceId != null) {
                    Api.updateFault(this.form).then(rs => {
                        if (rs.code == 200) {
                            this.$message.success("修改成功")
                            this.$emit('change')
                        } else {
                            this.$message.error("修改失败")
                        }
                    }).catch(er => {
                        this.$message.error("修改失败")
                    });
                } else {
                    Api.addFault(this.form).then(rs => {
                        this.$message.success("新增成功");
                        this.$emit('change')
                    });
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.blue-input {
    width: 100px;
}

.blue-input ::v-deep.el-input__inner {
    background-color: #394760;
    text-align: left;
}

.node-box-left-yes {
    width: calc(100% - 940px);
}

.node-box-left-no {
    width: 100%;
}

.node-add {
    position: absolute;
    right: 0;
    margin-top: 5px;
    margin-right: 20px;
}

.el-form-item-sw {
    padding: 20px 0px;
}

* {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-style: normal;
}

.edit-title {
    padding-left: 30px;
    height: 70px;
    line-height: 70px;
    background-color: #2C334C;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 700;
    font-size: 18px;
    color: #9A9DAA;
    font-style: normal;
    text-transform: none;
    border-left: 2px solid #171D2C;
}

.zt-right-dialog .zt-dialog-solt-3 .zt-solt-end {
    width: 100%;
    padding: 0 40px;
    background-color: #2C334C;
}

.room-img {
    width: 21px;
    height: 13px;
    vertical-align: bottom;
}

.room-content {
    font-weight: 400;
    font-size: 18px;
    color: #EDEDED;
    margin-left: 10px;
    width: 90px;
    flex: auto;
}

.room-page {
    background-color: #171D2C;
    margin-bottom: 4px;
    padding-top: 20px;
    box-sizing: border-box;
    min-height: 100px;
}

.room-content-text {
    flex: auto;
    width: calc(100% - 90px);
}

.sw-label {
    text-align: left;
    position: relative;
}

.add-crate {
    position: absolute;
    right: -10px;
    top: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer
}

img {
    height: 24px;
    width: 24px;
    margin-right: 4px;
}

span {
    overflow: hidden;
}

.crate-node {
    display: flex;
    margin-bottom: 10px;
}

.delete-device {
    cursor: pointer;
    line-height: 36px;
    color: #FBD580
}

.room-tag {
    background: #2B526F;
    border-radius: 18px;
    height: 36px;
    line-height: 36px;
    border: none;
    color: #FFFFFF;
    margin: 5px 5px 0px 5px;
}

.el-select {
    ::v-deep.is-disabled .el-input__inner {
        background-color: #3a528f;
        cursor: not-allowed;
    }
}

.def-input ::v-deep.el-input__inner {
    background: #394760;
    border: none;
    color: #FFFFFF;
}
</style>